<template>
	<view class="content">
		<view class="pageHeader">
			我的收藏
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			
			<view style="margin-top: 20upx;">
				<view v-if="goodsFavorList.length==0" class="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="empty-tips">
						暂无收藏~
					</view>
				</view>
				<view v-for="(item,index) in goodsFavorList" :key="index" style="font-size: 28upx;margin:0 30upx 20upx;background-color: #fff;border-radius: 20upx;">
					<view style="display: flex;align-items: center;padding: 26upx 30upx;position: relative;">
						<image :src="item.images" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
						
						<view style="display: flex;flex-direction: column;justify-content: space-between;flex:1;font-size: 28upx;color: #333;">
							<view class="goods-info">
								{{item.title}}
							</view>
							<view style="color: #EC6104;font-size: 28upx;font-weight: 500;margin-top: 30upx;">
								{{item.price}}
							</view>
							<view style="color: #999;font-size: 22upx;text-decoration: line-through;">
								{{item.original_price}}
							</view>
						</view>
						<button @click="cancel(item.goods_id,index)" class="rebtn cancel">取消</button>
					</view>
				</view>
				 <view class="loading">{{loadingText}}</view>
				
			
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	
	 var page = 1;
	export default {
		data() {
			return {
				userToken:'',// token
				goodsFavorList:[],//收藏记录数据				
				loadingText:'加载中...',				
			}
		},
		
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getGoodsFavorList()
			
		},
		// 监听触底
		onReachBottom() {
			this.getGoodsFavorList();
		},
	
		methods: {
			// 返回上一页
			backpage(){
				uni.switchTab({
					url:"../tab/my"
				})
			},
			cancel(goods_id,index){
				let that = this
				console.log(goods_id)
				postAjax('UserGoodsFavor/Cancel',{token:that.userToken,id:goods_id},function(data){
					// console.log(data)
					uni.showToast({
					  title:data.msg,
					  icon:'none'
					})	
							
					if(data.code==0){
						that.goodsFavorList.splice(index,1)
					}
					
				})
			},
			getGoodsFavorList(){
				let that = this				
				 uni.showNavigationBarLoading();			
				let postdata = {
					token:that.userToken,
					page:page,					
				}			
				// 我的订单列表
				let userGoodsFavorList = []
				
				postAjax('Usergoodsfavor/Index',postdata,function(data){
					if(data.code==0){
						userGoodsFavorList = data.data.data												
						if(userGoodsFavorList.length>0){
							  that.goodsFavorList = that.goodsFavorList.concat(userGoodsFavorList);
								
							page++; //每触底一次 page +1
							
						}else{
							that.loadingText = '已加载全部'							
						}
						
					}	
					uni.hideNavigationBarLoading();
				
				})
				
			}
			
		}
	}
	
</script>

<style>
	.loading{text-align:center; line-height:50px;font-size: 30upx;color: #666;}
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.cancel{color:#EC6104;border:2upx solid #EC6104;padding: 0;background-color: transparent;border-radius: 8upx;position: absolute;bottom:26upx;right: 20upx;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.rebtn{display: inline-block;font-size: 30upx;border-radius: 4upx;width:120upx;height: 58upx;line-height: 58upx;}
	.rebtn::after{border: none;}
	.regoodbox{padding: 170upx 0upx 22upx;}
	.total-wrap {
	  width: 100vw;
	  height: auto;
	  box-sizing: border-box;
	  padding: 20upx;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
	}
	
	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}
	
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
	.logistics-title {
		position: relative;
	    box-sizing: border-box;
	    padding:16upx 0;
		border-bottom:2upx solid #EEEEEE;
	    line-height: 28upx;
	    color: #4B4B4B;
	    font-size: 26upx;
	    font-family: 'PingFangSC-Medium';
	    text-align: left;
	}
</style>
